import React from 'react'
import "./Goods.less"
function Goods(props) {
    let arr = ['热门商品', '推荐商品', '全部商品', '部分商品']
    let { n, changeN, showgoods } = props
    return (
        <div className="list">
            <div className="list-nav">
                {
                    arr.map((item, index) => (
                        <div key={item.id} className={index === n ? 'select' : ''} onClick={() => changeN(index)}>{item}</div>
                    ))
                }
            </div>
            {
                showgoods.map(item => (

                    <div className="good" key={item.id}>
                        <div className="left">
                            <img src={item.img} alt="" />
                        </div>

                        <div className="right">
                            <span> {item.goodsname}</span>
                            <p className="p">&yen;{item.market_price}</p>
                        </div>

                    </div>
                ))
            }
        </div>
    )
}
export default React.memo(Goods)